<template>
  <view>
    <Header type="back" title="优惠券详情" />
    <view
      class="w-100 ab left0 bottom0 rounded-120 bg-f8ff"
      :class="'top' + bar_height"
    >
      <view class="px-2-6 py-4">
        <view
          class="font28 t-20 pt-2 h92 border-bottom h92 border-bottom f-s-c"
        >
          <view class="t-3 w140">名称：</view>{{ details.name || "" }}
        </view>
        <view class="font28 t-20 pt-2 h92 border-bottom f-s-c">
          <view class="t-3 w140">类型：</view
          >{{ coupon_type[details.orderType] }}
        </view>
        <view class="font28 t-20 pt-2 h92 border-bottom f-s-c">
          <view class="t-3 w140">起用金额：</view
          >{{ details.enableFee || "" }} 元
        </view>
        <view
          class="font28 t-20 pt-2 h92 border-bottom f-s-c"
          v-if="details.type == 1"
        >
          <view class="t-3 w140">优惠金额：</view
          >{{ details.couponFee || "" }} 元
        </view>
        <view
          class="font28 t-20 pt-2 h92 border-bottom f-s-c"
          v-if="details.type == 2"
        >
          <view class="t-3 w140">优惠上限：</view>{{ details.upFee || "" }} 元
        </view>
        <view
          class="font28 t-20 pt-2 h92 border-bottom f-s-c"
          v-if="details.effectiveType == 1"
        >
          <view class="t-3 w140">过期时间：</view>有效期到
          {{ details.expiredTime || "" }}
        </view>
        <view
          class="font28 t-20 pt-2 h92 border-bottom f-s-c"
          v-if="details.effectiveType == 2"
        >
          <view class="t-3 w140">有效天数：</view>领取后
          {{ details.effectiveDays || "" }} 天
        </view>
        <view
          class="font28 t-20 pt-2 h92 border-bottom f-s-c"
          v-if="details.stockNumber || details.stockNumber == 0"
        >
          <view class="t-3 w140">剩余张数：</view
          >{{ details.stockNumber || "0" }} 张
        </view>

        <view class="font28 t-20 pt-2 h92 border-bottom f-s-c">
          <view class="t-3 w140">备注信息：</view>{{ details.notice || "" }}
        </view>
        <view class="font28 t-20 pt-2 h92 border-bottom goods-info">
          <view class="t-3 w140" style="flex-shrink: 0">关联商品：</view>
          <view class="goods-msg">
            {{ getInfos(details.goodsRelList) }}
          </view>
        </view>
      </view>

      <view class="w-100 px-4 pt-6 f-b-c">
        <view
          @click.stop="get_redemption_click()"
          class="px-2-4 w220 h92 font24 f-c-c circle12 mx-1"
          :class="status_name ? 'bg-e4 t-8' : 'bg-theme t-0'"
          >{{ set_name }}</view
        >

        <view
          v-if="details.status == 1"
          class="px-2-4 bg-theme w220 h92 font24 f-c-c circle12 mx-1"
          @click="get_url"
          >去使用</view
        >
        <!-- <button type='primary' size="mini" class="px-2-4 w220 h92 font24 f-c-c circle12 mx-1" id="shareBtn" open-type="share" >分享</button> -->
      </view>

      <view class="w-100 h230"></view>
    </view>
  </view>
</template>

<script>
import Mixin from "../../../common/mixin.js";
import Header from "../../../components/header.vue";
import {
  my_coupon,
  receiveByPassword,
  availableList,
  get_coupont_id,
  get_coupont_details,
} from "../../../api/coupon.js";
export default {
  mixins: [Mixin],
  components: {
    Header,
  },
  data() {
    return {
      bar_height: 0,
      details: {},
      coupon_type: {
        TICKET: "票务",
        ACTIVITY: "活动",
        YEAR_CARD: "年卡",
        MALL: "商城",
        FOOD: "餐饮",
        // MAP:'地图',
        LINE: "路线",
        WORKSHOP: "工坊",
      },
      status_name: false,
    };
  },
  computed: {
    set_name() {
      let text = "立即领取",
        name = false;
      const { status, receive } = this.details;
      if (status == 0 || status) {
        if (status == 0) {
          text = "已失效";
        }
        text = "已领取";
        name = true;
      } else {
        text = receive ? "已领取" : "立即领取";
        name = receive;
      }
      this.status_name = name;
      return text;
    },
  },
  created() {
    const { statusBarHeight, screenHeight } = uni.getStorageSync("systemInfo");
    const cpupon_details = uni.getStorageSync("cpupon_details") || {};
    let top = statusBarHeight / (uni.upx2px(100) / 100); // 状态栏高度
    let toprpx = top + 80 + 20; // 100为 header 20 为间距
    this.bar_height = toprpx; //顶部高度
    this.details = cpupon_details;
  },
  onLoad(val) {
    if (val.inviter) {
      uni.setStorageSync("inviter", val.inviter);
    }
    if (val.coupon_id) {
      this.get_coupont_details_info(val.coupon_id);
    }
  },
  onShareAppMessage(res) {
    const { id } = uni.getStorageSync("userInfo") || {};
    return {
      title: `在线购票-${this.details.name}`,
      path: `/pages/my/coupon/details?coupon_id=${this.details.id}&inviter=${
        id || ""
      }`,
      // imageUrl:
      //   "https://ypsl.wohongkeji.com//file/2023/2/10/d273b7191b2fc8e4f74459c6f54a2d1f.png",
      imageUrl:
        "https://pw.wohongkeji.com/wx//file/2023/2/10/d273b7191b2fc8e4f74459c6f54a2d1f.png",
    };
  },
  // 自定义页面的分享到朋友圈
  onShareTimeline(res) {
    const { id } = uni.getStorageSync("userInfo") || {};
    return {
      title: `在线购票-${this.details.name}`,
      path: `/pages/my/coupon/details?coupon_id=${this.details.id}&inviter=${
        id || ""
      }`,
      // imageUrl:
      //   "https://ypsl.wohongkeji.com//file/2023/2/10/d273b7191b2fc8e4f74459c6f54a2d1f.png",
      imageUrl:
        "https://pw.wohongkeji.com/wx//file/2023/2/10/d273b7191b2fc8e4f74459c6f54a2d1f.png",
    };
  },
  methods: {
    getInfos(list) {
      if (!list || !list.length) return "通用";
      const msg = list.map((v) => v.goodsName).join("，");
      return msg;
    },
    get_coupont_details_info(val) {
      get_coupont_details({ id: val }).then((res) => {
        if (res.code == 0) {
          this.details = res.body;
        }
      });
    },
    get_redemption_click() {
      if (this.status_name) return;
      get_coupont_id({ couponId: this.details.id }).then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "领取成功",
            icon: "none",
          });
          this.details.receive = true;
        }
      });
    },
    back() {
      const page = getCurrentPages();
      // if(page[0].route == 'pages/login/index'){
      // 	return
      // }
      // uni.redirectTo({
      // 	url:'/pages/login/index'
      // })
    },
    get_url() {
      let type = this.details.orderType;
      let url = "";
      let code = "";
      // TICKET:'票务',
      //          ACTIVITY:'活动',
      //          YEAR_CARD:'年卡',
      //          MALL:'商城',
      //          FOOD:'餐饮',
      //          // MAP:'地图',
      //          LINE:'路线',
      //          WORKSHOP:"工坊"
      switch (type) {
        case "TICKET":
        case "YEAR_CARD":
          url = "/pages/ticket/index";

          if (type == "TICKET") {
            code = "ticket";
          }
          if (type == "YEAR_CARD") {
            code = "yeas_car";
          }
          uni.setStorageSync("nav_code", code);
          break;
        case "LINE":
        case "ACTIVITY":
        case "WORKSHOP":
          url = "/pages/index/index";
          if (type == "LINE") {
            code = "route";
          }
          if (type == "ACTIVITY") {
            code = "activity";
          }
          if (type == "WORKSHOP") {
            code = "workshop";
          }
          uni.setStorageSync("nav_code", code);
          break;
        case "FOOD":
          url = "/pages/food/food";
          break;
        case "MALL":
          url = "/pages/shop/index";
          break;
      }

      uni.redirectTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll-view_H {
  position: absolute;
  top: 50rpx;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9;
}
.rounded-120 {
  border-radius: 0 80rpx 0 0;
}
.goods-info {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 5rpx;
  .goods-msg {
    flex: 1;
  }
}
</style>
